import React, { memo, useState, useCallback } from "react";

import { Form, Input, Button, Row, Col, message } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
// import { AES } from "crypto-ts"; // crypto-js

import { validatePass } from "utils/validate";
import HYCode from "components/code/index";
import { PropCut, FormType, formData } from "../../mark";
import { register } from "services/account";

const RegisterForm = memo(function (props: PropCut) {
  const [username, setUsername] = useState(""); //如果需要把它弄成重置 要么掉antd里面的封装方法要么手动 我这里练习就不搞了
  const module: FormType = "register";

  const onFinish = async (val: formData) => {
    const { username, code, password } = val;
    const requestData = {
      username,
      code,
      password: password,
    };
    const res: any = await register(requestData);
    const { resCode } = res;
    if (resCode === 0) {
      message.success(res.message);
      // 调整到登录页面--改变父组件值
      props.cut(module);
    } else {
      message.success(res.message);
    }
  };

  const accountChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      if (username === e.target.value) return;
      setUsername(e.target.value);
    },
    [username]
  );

  return (
    <div>
      <div className="form-header">
        <h4 className="column">注册</h4>
        <span onClick={() => props.cut(module)}>登录账号</span>
      </div>
      <div className="form-content">
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{
            remember: true,
          }}
          onFinish={onFinish}
        >
          <Form.Item
            name="username"
            rules={[
              { required: true, message: "邮箱不能为空！" },
              { type: "email", message: "邮箱格式不正确" },
            ]}
          >
            <Input
              placeholder="账号"
              prefix={<UserOutlined className="site-form-item-icon" />}
              onChange={accountChange}
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              {
                pattern: validatePass(),
                message: "请输入大于6位小于20位数字+字母",
              },
            ]}
          >
            <Input
              placeholder="密码"
              prefix={<LockOutlined className="site-form-item-icon" />}
            />
          </Form.Item>
          <Form.Item
            name="repassword"
            rules={[
              { required: true, message: "密码不能为空" },
              ({ getFieldValue }) => ({
                validator(rule, value) {
                  return value !== getFieldValue("password")
                    ? Promise.reject("请输入相同密码！")
                    : Promise.resolve();
                },
              }),
            ]}
          >
            <Input
              placeholder="确认密码"
              prefix={<LockOutlined className="site-form-item-icon" />}
            />
          </Form.Item>
          <Form.Item
            name="code"
            rules={[{ required: true, message: "请输入验证码！", len: 6 }]}
          >
            <Row gutter={13}>
              <Col span="15">
                <Input
                  placeholder="验证码"
                  prefix={<LockOutlined className="site-form-item-icon" />}
                />
              </Col>
              <Col span="9">
                <HYCode username={username} module={module}></HYCode>
              </Col>
            </Row>
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" block>
              注册
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
});

export default RegisterForm;
